<template>
	<view class="store-message" v-if="Object.keys(store).length>0">
		<!-- 店铺基本信息 -->
		<view class="store-info">
			<view class="store-header">
				<text class="store-name">{{ store.title }}</text>
				<view class="store-rating" v-if="store.rating !== undefined && store.reviewCount !== undefined">
					<text class="rating-star">★</text>
					<text class="rating-value">{{ store.rating }}</text>
					<text class="review-count">({{ store.reviewCount }}条评价)</text>
				</view>
			</view>

			<text class="store-description">{{ store.district || '暂无区域信息' }}</text>

			<!-- 店铺图片展示 - 修复水平滚动问题 -->
			<view v-if="store.photos && store.photos.length > 0" class="image-container">
				<scroll-view 
					scroll-x="true" 
					class="scroll_img" 
					show-scrollbar="false"
					scroll-with-animation
				>
					<view class="image-wrapper">
						<view 
							class="store-images" 
							v-for="(img, index) in store.photos" 
							:key="index" 
							@click="previewStoreImage(store.photos, index)"
						>
							<image 
								class="store-img" 
								:src="img.url" 
								mode="aspectFill" 
								:alt="`${store.title}的图片${index+1}`"
								lazy-load
							></image>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="no-photo" v-else>暂无店铺图片</view>

			<!-- 店铺其他信息 -->
			<view class="store-details">
				<view class="detail-item">
					<text class="detail-label">营业时间：</text>
					<text class="detail-value">{{ store.business.opentime_today || '暂无营业时间' }}</text>
				</view>
				<view class="detail-item">
					<text class="detail-label">地 址：</text>
					<text class="detail-value">{{ store.address || '暂无地址信息' }}</text>
				</view>
			</view>

			<!-- 操作按钮 -->
			<view class="store-actions">
				<view class="action-item" @click="startNavigation">
					<uni-icons type="location-filled" color="#55aaff" size="16"></uni-icons>
					<text class="store-actions_text">导航前往</text>
				</view>
				<view class="action-item" v-if="store.business.tel" @click="callPhone(store.business.tel)">
					<uni-icons type="phone-filled" color="#55aaff" size="16"></uni-icons>
					<text class="store-actions_text">电话联系</text>
				</view>
				<view class="action-item" @click="tochat(msg.sendUserId)">
					<uni-icons type="chatboxes-filled" color="#55aaff" size="16"></uni-icons>
					<text class="store-actions_text">在线私聊</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
const db = uniCloud.databaseForJQL();
export default {
	props: {
		msg: {
			type: Object,
			required: true,
			validator: (value) => {
				if (!value.content || !value.content.sendshopId) {
					console.error('msg格式错误，需包含content.sendshopId');
					return false;
				}
				if (value.sendUserId === undefined) {
					console.error('msg需包含sendUserId（用于私聊）');
					return false;
				}
				return true;
			}
		}
	},
	data() {
		return {
			store: {},
			isLoading: false
		};
	},
	async mounted() {
		await this.getShop();
	},
	methods: {
		startNavigation() {
			const { coordinates } = this.store.location || {};
			if (!coordinates || coordinates.length !== 2) {
				uni.showToast({ title: '店铺位置信息无效', icon: 'none' });
				return;
			}

			const longitude = coordinates[0];
			const latitude = coordinates[1];

			uni.openLocation({
				latitude,
				longitude,
				name: this.store.title || '店铺位置',
				address: this.store.address || '暂无地址',
				scale: 16,
				success: () => {
					console.log('成功打开地图导航');
				},
				fail: (err) => {
					console.error('打开地图导航失败:', err);
					uni.showToast({ title: '打开地图失败，请检查地图应用', icon: 'none' });
				}
			});
		},
		
		callPhone(phone){
			const phoneReg = /^1[3-9]\d{9}$/;
			if (!phoneReg.test(phone) && !/^0\d{2,3}-\d{7,8}$/.test(phone)) {
				uni.showToast({ title: '手机号格式无效', icon: 'none' });
				return;
			}

			uni.showModal({
				title: '确认拨打',
				content: `是否拨打 ${phone}？`,
				confirmText: '拨打',
				cancelText: '取消',
				success: (res) => {
					if (res.confirm) {
						uni.makePhoneCall({
							phoneNumber: phone,
							fail: () => uni.showToast({ title: '拨打失败', icon: 'none' })
						});
					}
				}
			});
		},
		
		async getShop() {
			this.isLoading = true;
			try {
				const res = await db
					.collection('sendshop')
					.where({
						sendshopId: this.msg.content.sendshopId
					})
					.get();
				if (res.data.length > 0) {
					this.store = res.data[0];
					this.store.rating = this.store.rating || 4.0;
					this.store.reviewCount = this.store.reviewCount || 0;
					this.store.photos = this.store.photos || [];
					this.store.business = this.store.business || {};
				} else {
					uni.showToast({ title: '未找到该店铺', icon: 'none' });
				}
			} catch (e) {
				console.log(e);
				uni.showToast({ title: '加载失败，请重试', icon: 'none' });
			} finally {
				this.isLoading = false;
			}
		},
		
		previewStoreImage(imgs, index) {
			const urls = imgs.map(item => item.url).filter(url => url);
			if (urls.length === 0) return;
			uni.previewImage({
				current: urls[index],
				urls,
				fail: () => uni.showToast({ title: '预览图片失败', icon: 'none' })
			});
		},
		
		tochat(id){
			if (!id) {
				uni.showToast({ title: '用户ID无效', icon: 'none' });
				return;
			}
			uni.navigateTo({
				url:`/pages/PrivateChat/PrivateChat?id=${id}`,
				fail: () => uni.showToast({ title: '跳转失败，请重试', icon: 'none' })
			});
		}
	}
};
</script>

<style scoped>
.store-message {
	padding: 10rpx 20rpx;
}

.store-info {
	background-color: #f9f9f9;
	border-radius: 16rpx;
	padding: 20rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.store-header {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 15rpx;
}

.store-name {
	font-size: 32rpx;
	font-weight: 600;
	color: #333;
	max-width: 400rpx;
		/* #ifndef APP-PLUS-NVUE */
		white-space: nowrap;
	/* #endif */
	overflow: hidden;
	text-overflow: ellipsis;
}

.store-rating {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 6rpx;
}

.rating-star {
	color: #ffcc00;
	font-size: 26rpx;
}

.rating-value {
	color: #ff6b00;
	font-weight: 600;
	font-size: 26rpx;
}

.review-count {
	color: #999;
	font-size: 22rpx;
}

.store-description {
	font-size: 24rpx;
	color: #666;
	line-height: 38rpx;
	margin-bottom: 20rpx;
}

/* 图片滚动区域 - 关键修复 */
.image-container {
	/* 限制图片容器高度，确保不会被内容撑开 */
	height: 160rpx;
	/* 隐藏超出容器的内容 */
	overflow: hidden;
	margin-bottom: 15rpx;
}

.scroll_img {
	/* 确保滚动容器宽度为100% */
	width: 100%;
	/* 固定高度，与外部容器一致 */
	height: 100%;
	/* 移除默认内边距 */
	padding: 0;
}

/* 图片包装器 - 关键修复 */
.image-wrapper {
	/* 使用flex布局确保图片水平排列 */
	display: flex;
	flex-direction: row;
	/* 增加内边距，与外部容器保持一致 */
	padding: 8rpx 0;
	/* 确保内容不会被压缩 */
	flex-shrink: 0;
}

.store-images {
	/* 禁止图片容器收缩 */
	flex-shrink: 0;
	/* 固定图片容器尺寸 */
	width: 140rpx;
	height: 140rpx;
	/* 图片之间的间距 */
	margin-right: 12rpx;
	/* 圆角和溢出隐藏，使图片显示更美观 */
	border-radius: 12rpx;
	overflow: hidden;
}

.store-img {
	/* 确保图片充满容器 */
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.no-photo {
	text-align: center;
	color: #ccc;
	font-size: 24rpx;
	padding: 30rpx 0;
}

.store-details {
	margin: 20rpx 0;
}

.detail-item {
	display: flex;
	flex-direction: row;
	margin-bottom: 12rpx;
	line-height: 36rpx;
}

.detail-label {
	color: #999;
	font-size: 22rpx;
	min-width: 130rpx;
}

.detail-value {
	color: #333;
	font-size: 22rpx;
	flex: 1;
	white-space: normal;
	word-break: break-all;
}

.store-actions {
	display: flex;
	justify-content: space-around;
	flex-direction: row;
	gap: 16rpx;
	margin-top: 10rpx;
}

.action-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex: 1;
	padding: 12rpx 0;
	border-radius: 12rpx;
	background-color: #f0f7ff;
	cursor: pointer;
}

.store-actions_text {
	font-size: 22rpx;
	color: #55aaff;
	margin-top: 6rpx;
}
</style>
